<template>
  <div class="device-box">
    <div class="search-box box-shadow">
      <a-form
          ref="deviceRef"
          :model="deviceFormState"
          layout="inline">
        <a-form-item label="归属标段" name="sectionId" :autoLink="false" class="right-margin">
          <a-select
              v-model:value="deviceFormState.sections[0].sectionId">
            <a-select-option v-for="section in sections" :key="section.sectionId" :value="section.sectionId">
              {{ section.sectionName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="机械编码" class="right-margin">
          <a-input v-model:value="deviceFormState.deviceSn"/>
        </a-form-item>
        <a-form-item label="机械名称" class="right-margin">
          <a-input v-model:value="deviceFormState.deviceName"/>
        </a-form-item>
        <a-form-item label="审核状态">
          <a-select v-model:value="deviceFormState.checkStatus">
            <a-select-option v-for="item in vehicleStatusDict.dict" :key="item.key" :value="item.key">
              {{ vehicleStatusDict.getStatusByKey(item.key) }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="机械类型" class="right-margin">
          <a-select
              mode="multiple"
              v-model:value="deviceFormState.sections[0].kind">
            <a-select-option v-for="device in deviceTypeDict.dict" :key="device.deviceCode" :value="device.deviceCode">
              {{ device.deviceName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="form-end">
          <a-button @click="resetForm">重置</a-button>
          <a-button
              @click="getDeviceList"
              :title="typeof deviceFormState.sections[0].sectionId =='undefined'?'请选择归属标段':''"
              :disabled="typeof deviceFormState.sections[0].sectionId =='undefined'"
              type="primary">查询</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="content-box box-shadow">
      <div class="content-header">
        <span>查询列表</span>
        <a-button @click="openDeviceBaseInfoModal(null)" type="primary">新增</a-button>
      </div>
      <div class="content-table">
          <a-table
              :scroll="{y:setHeight('.content-box .content-table', 125) + 'px'}"
              :data-source="deviceList.deviceInfo"
              @change="nextDeviceList"
              :pagination="{
                'total':deviceList.totalCount,
                'pageSize':deviceList.everyPage,
                'showLessItems':true
              }"
              :rowKey="(record) => record.deviceId">
            <a-table-column
                title="归属标段"
                key="deviceId"
                data-index="sectionName">
            </a-table-column>
            <a-table-column title="机械类型" data-index="deviceKind">
              <template #default="{text}">
                <div>{{deviceTypeDict.getNameByCode(text)}}</div>
              </template>
            </a-table-column>
            <a-table-column title="机械名称" data-index="deviceName"></a-table-column>
            <a-table-column title="设备编码" data-index="deviceSn"></a-table-column>
            <a-table-column title="当前工作区域" data-index="cellName"></a-table-column>
            <a-table-column title="审核状态" data-index="statusStr"></a-table-column>
            <a-table-column title="流程查看" width="80px">
              <template #default="{record}">
                <a-dropdown placement="bottomCenter">
                  <a @click.prevent>
                    <div class="icon-box">
                      <NodeIndexOutlined/>
                    </div>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <span @click="openAdmissionModal(record)" style="display:block; width: 66px; height: 30px; font-weight: 600; text-align: center; color: #001035; line-height: 30px">入&ensp;场</span>
                      </a-menu-item>
                      <a-menu-divider />
                      <a-menu-item>
                        <span @click="openExitModal(record)" style="display:block; width: 66px; height: 30px; font-weight: 600; text-align: center; color: #001035; line-height: 30px">退&ensp;场</span>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </template>
            </a-table-column>
            <a-table-column title="机械颜色" data-index="deviceColor" width="80px">
              <template #default="{text}">
                <div :style="{'width':'20px','height':'20px','margin':'0 auto','background':text}"></div>
              </template>
            </a-table-column>
            <a-table-column title="基本信息" width="80px">
              <template #default="{text,record}">
                <div class="icon-box" @click="openDeviceBaseInfoModal(record)">
                  <FileTextOutlined/>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="详细信息" width="80px">
              <template #default="{text,record}">
                <div class="icon-box" @click="openDeviceInfoModal(record.deviceKind,record.deviceId)">
                  <FileTextOutlined/>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="图片信息">
              <template #default="{text,record}">
                <div style="display:flex;flex-direction: row;justify-content: center">
                  <div class="icon-box" style="margin-right: 12px" @click="addphoto(record)">
                    <PlusCircleOutlined/>
                  </div>
                  <div class="icon-box" @click="browsePhoto(record)">
                    <CameraOutlined/>
                  </div>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="提交审核" width="80px">
              <template #default="{record}">
                <div class="icon-box" @click="openSubmitModal(record)">
                  <FileDoneOutlined/>
                </div>
              </template>
            </a-table-column>
            <a-table-column title="退场" data-index="status">
              <template #default="{text,record}">
                <div class="icon-box" @click="openWalkOff(record)">
                  <LogoutOutlined/>
                </div>
<!--                <span v-if="text == '1'"><a-tag color="orange">退场审核中</a-tag></span>
                <span v-if="text == '2'"><a-tag color="green">已退场</a-tag></span>-->
              </template>
            </a-table-column>
          </a-table>
      </div>
    </div>
  </div>
  <SModal
      :title="deviceBaseForm.deviceId>0?'更新机械':'新增机械'"
      width="684"
      height="320"
      :isShow="showDeviceBaseModal"
      @closed="()=>showDeviceBaseModal=!showDeviceBaseModal">
    <a-form
        ref="deviceBaseFormRef"
        class="device-set-form device-base-form"
        :model="deviceBaseForm"
        :rules="driverBaseRules"
        :labelCol="{style: 'width: 88px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-form-item name="deviceName" label="机械名称">
        <a-input v-model:value="deviceBaseForm.deviceName" :disabled="deviceBaseForm.deviceId>0"/>
      </a-form-item>
      <a-form-item name="deviceKind" label="机械类型">
        <a-select
          v-model:value="deviceBaseForm.deviceKind"
          :disabled="deviceBaseForm.deviceId>0">
          <a-select-option
              v-for="device in deviceTypeDict.dict"
              :key="device.deviceCode" :value="device.deviceCode">
            {{device.deviceName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="sectionId" label="所属标段">
        <a-select
            v-model:value="deviceBaseForm.sectionId"
            :disabled="deviceBaseForm.deviceId>0">
          <a-select-option
              v-for="section in sections"
              :key="section.sectionId" :value="section.sectionId">
            {{section.sectionName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item name="deviceSn" label="设备编码">
        <a-input v-model:value="deviceBaseForm.deviceSn"/>
      </a-form-item>
      <a-form-item name="deviceColor" label="设备颜色">
        <input v-model="deviceBaseForm.deviceColor" type="color"/>
      </a-form-item>
      <a-form-item name="button-box" class="button-item">
        <a-button @click="()=>showDeviceBaseModal=!showDeviceBaseModal">取消</a-button>
        <a-button @click="setDeviceBaseInfo" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="详细信息(强夯)"
      width="694"
      height="320"
      :isShow="showTampInfoModal"
      @closed="()=>showTampInfoModal=!showTampInfoModal">
    <a-form
        ref="tampFormRef"
        class="device-set-form tamp-set-form"
        :model="tampFormState"
        :rules="tampFormRules"
        :labelCol="{style: 'width: 135px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-form-item name="weightPointFirst" label="一遍夯点锤重(t)">
        <a-input-number v-model:value="tampFormState.weightPointFirst"/>
      </a-form-item>
      <a-form-item name="weightPointSecond" label="二遍夯点锤重(t)">
        <a-input-number v-model:value="tampFormState.weightPointSecond"/>
      </a-form-item>
      <a-form-item name="diameterPointFirst" label="一遍夯点夯锤直径(m)">
        <a-input-number v-model:value="tampFormState.diameterPointFirst"/>
      </a-form-item>
      <a-form-item name="diameterPointSecond" label="二遍夯点夯锤直径(m)">
        <a-input-number v-model:value="tampFormState.diameterPointSecond"/>
      </a-form-item>
      <a-form-item name="weightCover" label="满夯锤重(t)">
        <a-input-number v-model:value="tampFormState.weightCover"/>
      </a-form-item>
      <a-form-item name="diameterCover" label="满夯直径(m)">
        <a-input-number v-model:value="tampFormState.diameterCover"/>
      </a-form-item>
      <a-form-item class="button-item">
        <a-button @click="()=>showTampInfoModal=!showTampInfoModal">取消</a-button>
        <a-button @click="setTampInfo(()=>{showTampInfoModal = false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="详细信息(碾压)"
      width="708"
      height="186"
      :model="compactionInfo"
      :is-show="compactionViewInfo.showModal"
      @closed="()=>compactionViewInfo.showModal=false">
    <a-form
        class="device-set-form compaction-set-form"
        :labelCol="{style: 'width: 86px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-row>
        <a-col :span="6">
          <div class="compaction-set-title">
            碾轮信息
          </div>
        </a-col>
        <a-form-item label="碾轮中缝(m)">
          <a-input-number v-model:value="compactionInfo.wheelJoint"/>
        </a-form-item>
        <a-form-item label="碾轮宽度(m)">
          <a-input-number v-model:value="compactionInfo.wheelWidth"/>
        </a-form-item>
      </a-row>
      <a-form-item class="button-item">
        <a-button @click="compactionViewInfo.showModal = false">取消</a-button>
        <a-button @click="setCompactionInfo(()=>{compactionViewInfo.showModal = false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="详细信息(CFG)"
      width="400"
      height="200"
      :is-show="cfgDeviceViewInfo.showModal"
      @closed="()=>cfgDeviceViewInfo.showModal=false">
    <a-form
        class="device-set-form compaction-set-form"
        :labelCol="{style: 'width: 86px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-row>
        <a-form-item label="钻头直径(m)">
          <a-input-number v-model:value="cfgDeviceInfo.diameter"/>
        </a-form-item>
      </a-row>
      <a-form-item class="button-item" style="right: 0">
        <a-button @click="cfgDeviceViewInfo.showModal=false">取消</a-button>
        <a-button @click="setCFGDeviceInfo(()=>{cfgDeviceViewInfo.showModal=false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="详细信息(旋挖钻)"
      width="400"
      height="200"
      :is-show="rotaryDeviceViewInfo.showModal"
      @closed="()=>rotaryDeviceViewInfo.showModal=false">
    <a-form
        class="device-set-form compaction-set-form"
        :labelCol="{style: 'width: 86px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-row>
        <a-form-item label="钻头直径(m)">
          <a-input-number v-model:value="rotaryDeviceInfo.diameter"/>
        </a-form-item>
      </a-row>
      <a-form-item class="button-item" style="right: 0">
        <a-button @click="rotaryDeviceViewInfo.showModal=false">取消</a-button>
        <a-button @click="setRotaryDeviceInfo(()=>{rotaryDeviceViewInfo.showModal=false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="详细信息(摊铺)"
      width="365"
      height="198"
      :model="paverInfo"
      :is-show="paverViewInfo.showModal"
      @closed="()=>paverViewInfo.showModal=false">
    <a-form
        class="device-set-form pav-set-form"
        :labelCol="{style: 'width: 86px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-alert  type="info" show-icon>
        <template #description>
          当前宽度请到终端修改
        </template>
      </a-alert>
      <a-row>
        <a-form-item class="pav-set-center">
            当前摊铺宽度  {{ paverInfo.width}}m
        </a-form-item>
      </a-row>
      <a-form-item class="button-item">
        <a-button @click="()=>paverViewInfo.showModal=false" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="详细信息(洒水车)"
      width="365"
      height="198"
      :is-show="waterViewInfo.showModal"
      @closed="()=>waterViewInfo.showModal=false">
      <a-form
          class="device-set-form compaction-set-form"
          :labelCol="{style: 'width: 120px'}"
          :wrapperCol="{span:24}"
          layout="inline">
        <a-row>
          <a-form-item label="洒水阈值(m³/s)">
            <a-input-number v-model:value="waterInfo.threshold"/>
          </a-form-item>
          <a-form-item class="button-item" style="right: 0">
            <a-button @click="waterViewInfo.showModal=false">取消</a-button>
            <a-button @click="setWaterInfo(()=>{waterViewInfo.showModal=false})" type="primary">确定</a-button>
          </a-form-item>
        </a-row>
      </a-form>
  </SModal>
  <SModal
      title="详细信息(水泥搅拌机)"
      width="380"
      height="255"
      :is-show="cementDeviceViewInfo.showModal"
      @closed="()=>cementDeviceViewInfo.showModal=false">
    <a-form
        class="device-set-form cement-set-form"
        :model="cementDeviceInfo"
        :labelCol="{style: 'width: 120px'}"
        :wrapperCol="{span:24}"
        layout="inline">
      <a-row>
        <a-form-item label="轴数">
          <a-select
              v-model:value="cementDeviceInfo.count">
            <a-select-option
                v-for="item in cementCountDict.dict"
                :key="item.key" :value="item.key">
              {{ item.value }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="单个钻头直径(m)">
          <a-input-number v-model:value="cementDeviceInfo.diameter"/>
        </a-form-item>
      </a-row>
      <a-form-item class="button-item" style="right: 0">
        <a-button @click="cementDeviceViewInfo.showModal=false">取消</a-button>
        <a-button @click="setCementDeviceInfo(()=>{cementDeviceViewInfo.showModal=false})" type="primary">确定</a-button>
      </a-form-item>
    </a-form>
  </SModal>
  <SModal
      title="图片上传"
      width="520"
      height="320"
      :is-show="isShowImgdialog"
      @closed="closeImgList">
    <div class="image-content">
      <a-form
          :labelCol="{ style: 'width: 0px;' }"
          labelAlign="top">
        <a-form-item>
          <span>请上传机械检查报告照片、上岗证、机械铭牌、带有机械标识的照片</span>
        </a-form-item>
        <a-form-item label="" :colon="false" style="margin:0px">
          <a-upload
              list-type="picture-card"
              v-model:file-list="imgfileListBefore"
              style="width:68px;height:68px;"
              :action="uploadImgFile"
              :remove="deleteImgFile">
            <div>
              <div class="imgBack">
                <div class="imgUpload"></div>
              </div>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
    </div>
    <div style="margin-top: 10px; position: absolute; right: 24px;">
      <a-button @click="closeImgList">取消</a-button>
      <a-button style="margin-left:8px " @click="comfitImgList" type="primary">确定</a-button>
    </div>
  </SModal>
  <SModal
      title="查看图片"
      width="466"
      height="320"
      :is-show="isShowImgDetaildialog"
      @closed="closeImgDetaildList">
    <div class="image-content-detail">
      <a-list :grid="{ gutter: 16, column: 4 }" :data-source="imgDetailList">
        <template #renderItem="{ item, index }">
          <a-list-item>
            <a-card
                @mouseenter="mouseenter(index,item)"
                @mouseleave="mouseleave(index,item)">
              <a-image :width="68" :height="68" :src="item.thumbUrl" style="position: absolute"/>
              <div class="del-icon-box" v-if="delIcon.inputAry[index] == true">
                <span class="del-icon-btn" title="删除文件" @click="deleteImgFileDetail(item)"><DeleteOutlined style="fontSize: 16px"/></span>
              </div>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </SModal>
  <TipModal
      title="确定删除图片吗？"
      :image="warning"
      :isShow="showDelImgModal">
    <div class="submit-box">
      <div class="tip-content">删除后不可恢复</div>
      <div class="btn-box">
        <a-button class="left-btn" @click="()=>showDelImgModal = false">取消</a-button>
        <a-button class="right-btn" @click="defineDelImg" type="primary">确认</a-button>
      </div>
    </div>
  </TipModal>
  <TipModal
      title="确定提交审核吗？"
      :image="warning"
      :isShow="showSubmitModal">
    <div class="submit-box">
      <div class="tip-content">提交后不可修改信息</div>
      <div class="btn-box">
        <a-button class="left-btn" @click="()=>showSubmitModal = false">取消</a-button>
        <a-button class="right-btn" @click="commitDic" type="primary">确认</a-button>
      </div>
    </div>
  </TipModal>
  <!-- 入场 -->
  <SModal
      title="节点列表"
      width="1000"
      height="545"
      :isShow="showAdmissionModal"
      @closed="()=>showAdmissionModal=!showAdmissionModal">
    <div v-html="taskDetailHtml" style="width: 100%;height: 100%"></div>
  </SModal>
  <!-- 退场 -->
  <SModal
      title="节点列表"
      width="1000"
      height="545"
      :isShow="showExitModal"
      @closed="()=>showExitModal=!showExitModal">
    <div v-html="taskDetailHtml" style="width: 100%;height: 100%"></div>
  </SModal>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref, reactive} from "vue"
import {setHeight} from "@/utils/tableUtils"
import {compaction, deviceBaseInfo, tampInfo, paver, waterDevice, cfgDevice, cementDevice} from "@/hooks/device/index"
import {useStore} from "vuex"
import deviceTypeDict from "@/dicts/deviceTypeDict"
import cementDict from "@/dicts/cementDict";
import cementCountDict from "@/dicts/cementCountDict";
import SModal from "@/components/SModal/index.vue"
import {EditOutlined,LogoutOutlined,FileTextOutlined,PlusCircleOutlined,CameraOutlined,FileDoneOutlined,DeleteOutlined,NodeIndexOutlined} from '@ant-design/icons-vue'
import rotaryDevice from "@/hooks/device/rotaryDevice";
import {message} from "ant-design-vue";
import axios from "@/utils/axios";
import TipModal from "@/components/SModal/TipModal.vue";
import warning from "@/assets/image/warning.png"
import vehicleStatusDict from "@/dicts/vehicleStatusDict";

export default defineComponent({
  setup(){
    const store = useStore();
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])));
    const {
      deviceRef,deviceFormState,deviceList,
      resetForm,getDeviceList,nextDeviceList,
      deviceBaseFormRef,showDeviceBaseModal,deviceBaseForm,driverBaseRules,
      openWalkOff,setDeviceBaseInfo,openDeviceBaseInfoModal
    } = deviceBaseInfo()
    const {tampFormRef,showTampInfoModal,tampFormState,tampFormRules,setTampInfo,openTampSetModal} = tampInfo()
    const {compactionViewInfo,compactionInfo,getCompactionInfo,setCompactionInfo} = compaction()
    const {paverViewInfo, paverInfo, getPaverInfo} = paver()
    const {cfgDeviceViewInfo,cfgDeviceInfo,getCFGDeviceInfo,setCFGDeviceInfo} = cfgDevice();
    const {rotaryDeviceViewInfo, rotaryDeviceInfo, getRotaryDeviceInfo, setRotaryDeviceInfo} = rotaryDevice();
    const {waterViewInfo,waterInfo,getWaterInfo,setWaterInfo} = waterDevice();
    const {cementDeviceViewInfo, cementDeviceInfo, getCementDeviceInfo, setCementDeviceInfo} = cementDevice();

    let isShowImgdialog = ref(false)
    let isShowImgDetaildialog = ref(false)
    let imgfileListBefore = ref<any[]>([])

    let imgDetailList = ref<any[]>([])
    let theDeviceId =  ref(0)
    let tempBefore = ref<any[]>([])
    // 显示删除按钮
    const delIcon = reactive({
      inputAry: [] as boolean[]
    })
    const delIconInfo = ref()
    // 删除图片弹窗
    const showDelImgModal = ref<boolean>(false)

    // 行数据
    const recordInfo:any = ref()
    // 提交审核
    const showSubmitModal = ref<boolean>(false)

    // 入场审核弹窗
    const showAdmissionModal = ref(false)
    // 退场审核弹窗
    const showExitModal = ref(false)
    // 审核任务详情
    const taskDetailHtml:any = ref('')

    const closeImgList = () => {
      isShowImgdialog.value = false
      imgfileListBefore.value = []

    }
    const closeImgDetaildList = () => {
      isShowImgDetaildialog.value = false
      imgDetailList.value = []
    }

    // 详细信息弹框
    const openDeviceInfoModal = (type:number, deviceId:number)=>{
      switch (type) {
        case 2:
          openTampSetModal(deviceId)
          break
        case 3:
          getCompactionInfo(deviceId,()=>{compactionViewInfo.value.showModal = true})
          break
        case 4:
          getCompactionInfo(deviceId,()=>{compactionViewInfo.value.showModal = true})
          break
        case 8:
          getPaverInfo(deviceId,()=>{paverViewInfo.value.showModal = true})
          break
        case 9:
          getPaverInfo(deviceId,()=>{paverViewInfo.value.showModal = true})
          break
        case 10:
          getCFGDeviceInfo(deviceId,()=>{cfgDeviceViewInfo.value.showModal = true})
          break
        case 15:
          getRotaryDeviceInfo(deviceId,()=>{rotaryDeviceViewInfo.value.showModal = true})
          break
        case 18:
          getWaterInfo(deviceId,()=>{waterViewInfo.value.showModal = true});
          break
        case 22:
          getCementDeviceInfo(deviceId,()=>{cementDeviceViewInfo.value.showModal = true})
          break
      }
    }

    const addphoto = (record: any) =>{
      theDeviceId.value = record.deviceId
      imgfileListBefore.value = []
      tempBefore.value = []
      if (record.status === 0 || record.status === 3 || record.status === 5) {
        isShowImgdialog.value = true
      } else {
        message.info('状态处于审核中或者已经通过审核，请勿重复提交')
      }
    }
    const browsePhoto = (record: any) =>{
      theDeviceId.value = record.deviceId
      recordInfo.value = record
      imgDetailList.value = []
      fetchImgList(record.deviceId)
      isShowImgDetaildialog.value = true
    }
    const fetchImgList = (deviceId:any)=>{
      axios.post('common/findDevicePic', {deviceId:deviceId,kind:0}).then((res: any) => {
        if (res.success) {
          imgDetailList.value = []
          let imgLit = res.data.pic
          for (let i = 0; i < imgLit.length; i++) {
            let imgObj = imgLit[i]
            //图片数组
            let imgObjBefore = {
              thumbUrl: imgObj.path,
              uid: imgObj.id,
            }
            imgDetailList.value.push(imgObjBefore)
          }
        } else {
          message.info(res.msg)
        }
      })
    }

    //图片上传
    const uploadImgFile = (e: any) => {
      const formData: any = new FormData()
      formData.append('mFile', e)
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url = "https://zhihuigongdi.cn:6021/swfs/uploadSWFS"
        axios.post(url, formData, {
          headers: {'content-type': 'multipart/form-data',}
        }).then((res: any) => {
          console.log(res)
          if (res) {
            getFile(res)
          }

        }).catch(error => {
          message.info('上传失败')
        })
      }
    }
    const getFile = (imgUrl: any,) => {
      imgfileListBefore.value = []
      console.log(imgUrl)
      let imgObj = {
        thumbUrl: imgUrl,
        uid: imgUrl
      }

      tempBefore.value.push(imgObj)
      for (let i = 0; i < tempBefore.value.length; i++) {
        imgfileListBefore.value.push(tempBefore.value[i])
      }
    }
    const deleteImgFile = (e: any) => {
      for (let i = 0; i < tempBefore.value.length; i++) {
        if (e == tempBefore.value[i]) {
          tempBefore.value.splice(i, 1)
          imgfileListBefore.value.splice(i, 1)
          return
        }
      }
    }
    // 显示删除按钮
    const mouseenter = (index:number, item:any) => {
      delIcon.inputAry[index] = true
    }
    const mouseleave = (index:number, item:any) => {
      delIcon.inputAry[index] = false
    }
    // 是否确认删除弹窗
    const deleteImgFileDetail = (e:any) => {
      if (recordInfo.value.checkStatus == 0 || recordInfo.value.checkStatus == 3) {
        showDelImgModal.value = true
        delIconInfo.value = e
      } else {
        message.info("机械审核中或已通过审核")
      }
    }
    // 确定删除
    const defineDelImg = () => {
      for (let i = 0; i < imgDetailList.value.length; i++) {
        if (delIconInfo.value == imgDetailList.value[i]) {
          let imgObj = imgDetailList.value[i]
          let obj =  JSON.parse(JSON.stringify(imgObj))
          let index =  JSON.parse(JSON.stringify(i))
          delImg(index,obj.uid)
          imgDetailList.value.splice(i , 1)
        }
      }
    }
    const delImg = (index:number,uid:any)=>{
      let requestObj = {
        deviceId:theDeviceId.value,
        kind:0,
        picId:[uid]
      }
      axios.post('common/deleteDevicePic',
          requestObj).then((res: any) => {
        if (res.success) {
          message.info("删除成功")
          showDelImgModal.value = false
        } else {
          message.info(res.msg)
        }
      })
    }

    const comfitImgList = () => {
      let lastAry = []
      for (let i = 0; i < imgfileListBefore.value.length; i++) {
        let obj = {
          path: imgfileListBefore.value[i].thumbUrl
        }
        lastAry.push(obj)
      }
      console.log("上传数组")
      console.log(lastAry)
      let queryForm = {
        deviceId: theDeviceId.value,
        kind:0,
        pic: lastAry
      }

      axios.post('common/saveDevicePic', queryForm).then((res: any) => {
        if (res.success) {
          imgfileListBefore.value = []
          isShowImgdialog.value = false
          message.info("保存成功")
        } else {
          message.info(res.msg)
        }
      })
    }

    // 提交审核
    const openSubmitModal = (record:any) =>{
      if (record.status == 0 || record.status == 3 || record.status == 5) {
        recordInfo.value = record
        showSubmitModal.value = true
      } else if (record.status == 1 || record.status == 4) {
        message.info('机械审核中无需重复提交')
      } else if (record.status == 2 || record.status == 6) {
        message.info('机械已通过审核无需重复提交')
      }
    }
    const commitDic = () =>{
      axios.post('/board/push/commitDevice', {deviceId: recordInfo.value.deviceId, kind: 0}).then((res:any) => {
        if (res.success) {
          message.info('审核已提交')
          showSubmitModal.value = false
          recordInfo.value.checkStatus = 1
          recordInfo.value.checkStatusStr = '审核中'
        } else {
          message.info(res.msg)
        }
      })
    }

    // 审批处理详情
    const getTaskDetailHtml = (taskId:any) =>{
      let url = 'https://zhihuigongdi.cn:6033/flowTask/getTaskDetailPage/?id=' + taskId
      axios.get(url,
          {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).then((res:any)=>{
        taskDetailHtml.value = res
      })
    }

    // 打开入场审批处理详情弹窗
    const openAdmissionModal = (record:any) =>{
      // taskDetailHtml.value = null
      if (record.checkStatus != 0 && record.outStatus == 0) {
        showAdmissionModal.value = true
        admissionFlowPath(record.deviceId).then((res:any)=>{
          if (res.code == 0) {
            getTaskDetailHtml(res.data.id)
          }
        })
      } else {
        message.info("审核任务不存在")
      }
    }
    // 入场审批获取
    const admissionFlowPath = (deviceId:any) =>{
      return new Promise((resolve, reject)=>{
        let url = 'https://zhihuigongdi.cn:6033/flowTask/getFlowTaskID?taskObjID=d' + deviceId + '&flowTypeID=3'
        axios.get(url,
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res:any)=>{
          if (res.code == 0) {
            resolve(res)
          } else {
            reject(false)
          }
        })
      })
    }

    // 打开退场审批处理详情弹窗
    const openExitModal = (record:any) =>{
      // taskDetailHtml.value = null
      if (record.outStatus != 0) {
        showExitModal.value = true
        exitFlowPath(record.deviceId).then((res:any)=>{
          if (res.code == 0) {
            getTaskDetailHtml(res.data.id)
          }
        })
      } else {
        message.info("审核任务不存在")
      }
    }
    // 退场审批获取
    const exitFlowPath = (deviceId:any) =>{
      return new Promise((resolve, reject)=>{
        let url = 'https://zhihuigongdi.cn:6033/flowTask/getFlowTaskID?taskObjID=d' + deviceId + '&flowTypeID=7'
        axios.get(url,
            {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res:any)=>{
          if (res.code == 0) {
            resolve(res)
          } else {
            reject(false)
          }
        })
      })
    }

    onMounted(()=>{
      if(sections.value.length>0){
        deviceFormState.value.sections[0].sectionId = sections.value[0].sectionId
        getDeviceList()
      }
    })

    return{
      setHeight,
      // 上传查看图片
      deleteImgFileDetail,
      isShowImgDetaildialog,
      imgDetailList,
      showDelImgModal,
      closeImgDetaildList,
      comfitImgList,
      deleteImgFile,
      tempBefore,
      uploadImgFile,
      isShowImgdialog,
      closeImgList,
      imgfileListBefore,
      delIcon, delIconInfo,
      mouseenter, mouseleave,
      defineDelImg,

      // 查询设备列表
      sections,
      deviceTypeDict,
      vehicleStatusDict,
      deviceRef,
      deviceFormState,
      deviceList,
      resetForm,
      getDeviceList,
      nextDeviceList,
      openDeviceInfoModal,

      // 编辑基本信息
      deviceBaseFormRef,
      showDeviceBaseModal,
      deviceBaseForm,
      driverBaseRules,
      openWalkOff,
      setDeviceBaseInfo,
      openDeviceBaseInfoModal,
      addphoto,
      browsePhoto,

      // 强夯
      tampFormRef,
      showTampInfoModal,
      tampFormState,
      tampFormRules,
      setTampInfo,

      // 碾压
      compactionViewInfo,
      compactionInfo,
      getCompactionInfo,
      setCompactionInfo,

      //摊铺
      paverViewInfo,
      paverInfo,
      getPaverInfo,

      // CFG
      cfgDeviceViewInfo,
      cfgDeviceInfo,
      getCFGDeviceInfo,
      setCFGDeviceInfo,

      //旋挖钻
      rotaryDeviceViewInfo,
      rotaryDeviceInfo,
      getRotaryDeviceInfo,
      setRotaryDeviceInfo,

      // 洒水车
      waterViewInfo,
      waterInfo,
      getWaterInfo,
      setWaterInfo,

      // 水泥搅拌桩
      cementDict, cementCountDict,
      cementDeviceViewInfo,
      cementDeviceInfo,
      getCementDeviceInfo,
      setCementDeviceInfo,

      warning,
      recordInfo,
      showSubmitModal,
      openSubmitModal, commitDic,

      // 流程查看
      showAdmissionModal,
      showExitModal,
      taskDetailHtml,

      getTaskDetailHtml,
      openAdmissionModal,
      admissionFlowPath,
      openExitModal,
      exitFlowPath,
    }
  },
  components:{
    SModal,
    TipModal,
    EditOutlined,
    LogoutOutlined,
    FileTextOutlined,
    PlusCircleOutlined,
    CameraOutlined,
    FileDoneOutlined,
    DeleteOutlined,
    NodeIndexOutlined
  }
})
</script>

<style lang="scss" scoped>
.device-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .search-box{
    display: flex;
    width: 100%;
    height: 128px;
    align-items: center;
    padding: 0 24px;
    box-sizing: border-box;
    flex-shrink: 0;
    ::v-deep label{
      color: #666;
    }
    ::v-deep .ant-form{
      width: 100%;
      //height: 40px;
    }
    ::v-deep .ant-form-item {
      margin: 8px 0;
    }
    .right-margin {
      margin-right: 106px;
    }
    ::v-deep .ant-select{
      width: 240px;
    }
    ::v-deep .ant-input{
      width: 240px;
    }
    ::v-deep .ant-select-multiple{
      width: 300px;
    }
    ::v-deep .ant-form-item-with-help{
      margin-bottom: 0px
    }
    .form-end{
      float: right;
      ::v-deep button{
        margin-left: 12px;
      }
    }
  }
  .content-box{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    padding: 0 38px;
    box-sizing: border-box;
    .content-header{
      display: flex;
      width: 100%;
      padding: 18px 0 12px;
      flex-direction: row;
      justify-content: flex-start;
      box-sizing: border-box;
      span{
        display: block;
        font-size: 18px;
        font-weight: bold;
        line-height: 32px;
      }
      ::v-deep button{
        margin-right: 16px;
        margin-left: auto;
      }
    }
    .content-table{
      flex: 1;
      width: calc(100% - 16px);
    }
  }
}
.device-set-form{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 16px 0;
  box-sizing: border-box;
  ::v-deep .ant-form-item-with-help {
    margin-bottom: 0px !important;
  }
  ::v-deep .ant-form-item{
    margin-bottom: 23px;
  }
  ::v-deep .ant-form-item:nth-of-type(2n){
    margin-right: 0px;
  }
  .button-item{
    position: absolute;
    right: 24px;
    bottom: 0px;
    margin-right: 0;
    ::v-deep button{
      margin-left: 8px;
    }
  }
}
.device-base-form{
  ::v-deep .ant-input{
    width: 210px;
  }
  ::v-deep .ant-select{
    width: 210px;
  }
}
.tamp-set-form{
  ::v-deep .ant-input-number{
    width: 176px;
  }
}
.pav-set-form{
  .pav-set-center{
    padding-left: 16px;
    height: 16px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 16px;
  }
  ::v-deep .ant-alert-with-description{
    padding: 8px;
  }

}
.compaction-set-form{
  .compaction-set-title{
    padding-left: 16px;
    height: 39px;
    line-height: 39px;
    box-sizing: border-box;
  }
  ::v-deep .ant-form-item{
    margin-right: 0px;
  }
  ::v-deep .ant-input-number{
    width: 148px;
  }
}
.cement-set-form {
  ::v-deep .ant-select{
    width: 180px;
  }
  ::v-deep .ant-input-number{
    width: 180px;
  }
}
.image-content-detail {
  margin-left: 0px;
  margin-top: 20px;
  position: relative;
  height: 220px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  ::v-deep .ant-list-item {
    //width: 90px;
    margin-bottom: 12px;
  }
  ::v-deep .ant-card {
    width: 90px;
  }
  ::v-deep .ant-card-body {
    width: 88px;
    height: 88px;
    padding: 10px;
  }
  ::v-deep .ant-image-img {
    width: 68px;
    height: 68px;
  }
  .del-icon-box {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 10px;
    left: 60px;
    z-index: 10;
    //background-color: rgba(0, 0, 0, 0.1);
    .del-icon-btn {
      display: block;
      width: 16px;
      height: 16px;
      //position: relative;
      //top: 25px;
      //left: 27px;
    }
  }
}
.image-content {
  padding-top: 20px;
  position: relative;
  height: 200px;
  width: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  .imgBack {
    background: url('../../../assets/image/imgBack.png') center no-repeat;
    width: 50px;
    height: 50px;
    .imgUpload {
      background: url('../../../assets/image/imgUpload.png') no-repeat center;
      height: 58px;
      width: 58px;
      /* margin: 0 auto; */
      /* margin-right: 5px; */
      position: relative;
      right: 5px;
      bottom: 5px;
    }
  }
  .ant-form-item {
    margin-bottom: 12px;

    ::v-deep .ant-tooltip-open .ant-upload-list-item .ant-upload-list-item-error {
      display: none;
    }

    ::v-deep .ant-upload-picture-card-wrapper {
      width: 480px;
    }

    ::v-deep .ant-upload-list-picture-card-container {
      width: 68px;
      height: 68px;
    }

    ::v-deep .ant-upload-list-picture-card .ant-upload-list-item {
      width: 68px;
      height: 68px;
      margin: 0px;
      margin-right: 12px;
    }

    ::v-deep .ant-upload-list-picture .ant-upload-list-item,
    ::v-deep .ant-upload-list-picture-card .ant-upload-list-item {
      padding: 0px;
    }

    ::v-deep .ant-upload-list-item {
      margin-top: 0px;
    }

    ::v-deep .ant-upload.ant-upload-select-picture-card {
      width: 68px;
      height: 68px;
      background: #e6f1fc;
      border-radius: 2px;
      border: 1px solid #1677ff;
    }

    .fileShowCls {
      width: 144px;
      height: 40px;
      background: #e6f1fc;
      display: inline-block;
      opacity: 0.66;
      float: left;
      margin-right: 8px;
      margin-bottom: 4px;

      ::v-deep .ant-image {
        position: relative;
        top: -9px;
      }

      .filenamecls {
        width: 78px;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        margin-left: 8px;
        margin-right: 8px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 24px;
        line-height: 24px;
        margin-top: 8px;
        cursor: pointer;
      }

      .delfilenamecls {
        font-size: 12px;
        font-weight: 400;
        color: #1677ff;
        line-height: 17px;
        width: 24px;
        display: inline-block;
        cursor: pointer;
        position: relative;
        top: -8px;
      }
    }
    .uploadFileBtn {
      width: 80px;
      // height: 32px;
      background: #e6f1fc;
      border: 1px solid #1677ff;
      font-size: 14px;
      font-weight: 400;
      color: #1677ff;
      border-radius: 2px;
      height: 40px;
      position: absolute;
      left: 0px;
      display: inline-block;
      z-index: -1;
    }
    .reportUploadDiv {
      ::v-deep .ant-upload-list-item {
        width: 228px;
      }
    }
  }
  .button-item {
    position: absolute;
    margin-top: 50px;
    right: 24px;
    bottom: 0px;
    margin-right: 0;
  }
}
.submit-box {
  display: flex;
  flex-direction: column;
  .tip-content {
    margin-left: 6px;
    color: #FF9C01;
    font-size: 12px;
  }
  .btn-box {
    display: flex;
    flex-direction: row;
    .left-btn {
      margin-top: 21px;
      margin-left: 52px;
      height: 28px;
      width: 64px;
      background: #E6F1FC;
      color: #1677FF;;
    }
    .right-btn{
      margin-top: 21px;
      margin-left: 8px;
      height: 28px;
      width: 64px;
      background: #1677FF;
    }
  }
}
</style>
